<template>
    <div class="ceilingScreen">
        <div class="selectDiv">

            <div @click="changeCarIndex(1 , 'carIndex')" :class="1 == carIndex ? 'tabActive' : ''">{{filterData.areas[0].bc[0].name}}</div>
            <div @click="changeCarIndex(2 , 'carIndex')" :class="2 == carIndex ? 'tabActive' : ''">{{filterData.style[0].name}}</div>
            <div @click="changeCarIndex(3 , 'carIndex')" :class="3 == carIndex ? 'tabActive' : ''">{{filterData.orders[1].name}}</div>
            <div @click="changeCarIndex(4 , 'carIndex')" :class="4 == carIndex ? 'tabActive' : ''">筛选</div>
            
        </div>
        <div class="selectDiv_Chil" v-if="flag">
            <div class="Chil_1" v-if="carIndex == 1">
                <div class="Chil_1_left">
                    <li v-for="(item,index) in filterData.areas" 
                    :key="index"
                    @click="changeCarIndex(index , 'ChildIndex' , item)"
                    :class="index == ChildIndex ? 'Chil_1_Active' : ''"
                    >
                        {{item.name}}
                    </li>
                </div>
                <div class="Chil_1_right">
                    <li v-for="(item,index) in filterData.areas[ChildIndex].bc" :key="item.id"
                    @click="changeCarIndex(index , 'ChildIndex_True' , item)"
                    :class="index == ChildIndex_True ? 'Chil_1_Active_true' : ''"
                    >
                        {{item.name}}
                    </li>
                </div>
            </div>
            <div v-if="carIndex == 2">
                <div class="Chil_2">
                    <li v-for="(item,index) in filterData.style" 
                    :key="item.id"
                    @click="changeCarIndex(index , 'Child_2_Ind' , item)"
                    :class="index == Child_2_Ind ? 'Chil_2_Active' : ''"
                    >
                        {{item.name}}
                    </li>
                </div>
            </div>
            <div v-if="carIndex == 3">
                <div class="Chil_3">
                    <li v-for="(item,index) in filterData.orders" 
                    :key="item.id"
                    @click="changeCarIndex(index , 'Child_3_Ind' , item)"
                    :class="index == Child_3_Ind ? 'Chil_3_Active' : ''"
                    >
                        {{item.name}}
                    </li>
                </div>
            </div>
            <div v-if="carIndex == 4">
                <div class="Chil_Div_4">
                    <p>场景</p>
                    <p class="selectOption">
                        <span v-for="(item , index) in filterData.tags" :key="index">{{item.name}}</span>
                    </p>
                </div>

                <div class="Chil_Div_4">
                    <p>人均</p>
                    <p class="selectOption">
                        <input type="text" placeholder="最低价"> —— <input type="text" placeholder="最高价">
                    </p>
                </div>
                
                <div class="Chil_Div_4">
                    <p>场景</p>
                    <p class="selectOption">
                        <span v-for="(item , index) in filterData.types" :key="index">{{item.name}}</span>
                    </p>
                </div>
                
            </div>
        </div>

        <div class="MD" v-if="DFlag" @click="changeMDFlagFun()"></div>

    </div>
</template>

<script>

import { Getfiltercontent } from "./../services/index";
export default {

    // props : [ "filterData" ],

    data(){
        return {
            // 蒙版
            DFlag : false,

            // 筛选
            flag : false,

            // tab切换选中的下标
            carIndex : 1,

            // 第一个选择框的二级下标
            ChildIndex : 0,

            ChildIndex_True : 0,
            // 第二个选择框下标
            Child_2_Ind : 0,

            // 第三个选择框下标
            Child_3_Ind : 0,

            // 筛选数据
            filterData : []
        }
    },

    created(){
        // 获取筛选
        this.GetFilterFun();
    },

    methods:{
        // 获取筛选
        async GetFilterFun(){
        let result = await Getfiltercontent(
                {
                    "cityId": 19,
                    "mwAuthToken": "uPCQvKl9RhX5r9SGP2noD0Ei0D3egOAN8IrKQ9lIY-BS0nZ8NKqZIMOel3oNkoUYqtPCSKhwebLrgjfpX-CQWJIcZYXmpdLdIF3rNSY-BJe8dSyjtMBhBHk20pqzLLrwWAX-Cq4yzX-ChX-Csk9vBdT1EflbSDPNZFGgxBc5VnC14kzL8imwH7UY-BgBh0Yhgu8NUZXa5Gthb4rm1u2ZIbmPpChaX-Ce3QuHcg-Z-Z",
                    "fromw": 1401
                }
            );
        
            this.filterData = result.data;
            console.log( "GetFilter " , this.filterData);
        },

        // 更改下标
        changeCarIndex(index , target , item){
            this[target] = index;
            this.flag = true;
            this.DFlag = true;

            if(item){
                this.pushConditions( index  , item  )
            }
        },

        // // 改变状态
        // changeFlagFun( flag , type){
        //     this[type] = ! flag
        // }

        // 改变蒙版
        changeMDFlagFun( ){
            this.DFlag = false;
            this.flag = false;
        },

        pushConditions( index , type ){
            console.log(index , type);
        }
    },

    

}
</script>

<style lang="scss" scoped>


    .tabActive{
        color: coral;
    }

    .selectDiv{
        position: relative;
        z-index: 99;
        background: #fff;
    }

    .selectDiv_Chil{
        position: relative;
        z-index: 99;
        background: #fff;

        padding: 0 50rpx;

        .Chil_1{
            display: flex;
            justify-content: space-between;
            height: 300rpx;
            background: #fff;
            .Chil_1_left{
                flex: 1;
                overflow: auto;
                background: #fff;

                li{
                    font-size: 16px;
                    padding: 5rpx;    
                }

                li.Chil_1_Active{
                    background: #eee;
                    color: coral;
                }
            }

            .Chil_1_right{
                flex: 1;
                overflow: auto;
                background: #eee;

                li{
                    font-size: 16px;
                    padding: 5rpx;    
                }
            }
        }

        .Chil_2{
            width: 100%;
            height: 300rpx;
            overflow: auto;

            li{
                font-size: 16px;
                padding: 5rpx;    
            }

            li.Chil_2_Active{
                color: coral;
            }
        }

        .Chil_3{
            width: 100%;
            height: 300rpx;
            overflow: auto;

            li{
                font-size: 16px;
                padding: 5rpx;    
            }

            li.Chil_3_Active{
                color: coral;
            }
        }

        .Chil_1_Active_true{
                color: coral;
        }


        .Chil_Div_4{
            height: 130rpx;

            > p{
            font-size: 12px;
            margin-bottom: 20rpx;

            }

            .selectOption{

                >input{
                    text-align: center;
                    font-size: 12px;
                }

                >input::placeholder{
                    font-size: 12px;
                    text-align: center;
                }

                display: flex;
                justify-content: left;
                margin-top: 20rpx;
                span{
                    padding: 3rpx;
                    font-size: 12px;
                    border: 1px solid #999;
                    padding: 3rpx;
                    margin-right: 20rpx;
                }

            }
            
            border-bottom: 1px solid rgb(92, 92, 92);
            margin-bottom: 10rpx;
        }

        
    }


    .ceilingScreen{
        position: relative;
        z-index: 99;

        width: 100%; 
        min-height: 50rpx;
        background: #fff;  
        .selectDiv{
            width: 100%;
            display: flex;
            justify-content: space-around;
        }
        
    }

    .MD{
        width: 1000%;
        height: 2000%;
        position: absolute;
        top: -1000%;
        left: -100%;
        background: #0005;
        z-index: 88;
    }
    
</style>